/*
  学习目标：NavBar升级属性: fixed属性, 表示固定在头部
*/

import Icon from "@/components/Icon";
import classNames from "classnames";
import { useHistory } from "react-router-dom";
import styles from "./index.module.scss";
interface INavBarProps {
  children?: React.ReactNode;
  right?: React.ReactNode;
  onBack?: () => void;
  // 1. 定义fixed的类型
  fixed?: boolean;
}

export default function NavBar({
  children,
  right,
  onBack,
  fixed,
}: INavBarProps) {
  const history = useHistory();

  return (
    <div className={styles.root}>
      {/* 2. 拼接类名 */}
      <div className={classNames("main", { fixed })}>
        <div className="left" onClick={onBack || history.goBack}>
          <Icon type="iconfanhui" />
        </div>
        <div className="title">{children}</div>
        <div className="right">{right}</div>
      </div>
    </div>
  );
}
